<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="top" label-width="80px" size="default"
    @submit.prevent>
    <div class="card-container">
      <el-card style="{width: 98% !important}" shadow="always">
        <template #header>
          <div class="clear-fix">
            <span>Book Details</span>
          </div>
        </template>
        <el-form-item label="Title" prop="title" class="required">
          <el-input v-model="formData.title" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="Author" prop="author" >
          <el-input v-model="formData.author" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="Publication Year" prop="publication_year">
          <el-input-number v-model="formData.publication_year" class="full-width-input"
            controls-position="right" :min="1000" :max="2030" :precision="0" :step="1">
          </el-input-number>
        </el-form-item>
        <el-form-item label="ISBN " prop="isbn" class="required">
          <el-input v-model="formData.isbn" type="text" clearable></el-input>
        </el-form-item>
        <div class="static-content-item">
          <el-divider direction="horizontal"></el-divider>
        </div>
        <el-row>
          <el-button type="primary" @click="submitForm">{{btnSubmit}}</el-button>
          <el-button type="info" plain @click="resetForm">Reset</el-button>
          <el-button type="warning" @click="goBackTo">Cancel</el-button>
        </el-row>
      </el-card>
    </div>
  </el-form>
</template>

<script>
  import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance,
    onMounted
  }
  from 'vue'
  import { getBook, saveBook,updateBook } from "@/api/book";
  import { useRouter,useRoute } from "vue-router"  // 引入userRouter
  export default defineComponent({
    props: {},
    setup() {
      const route = useRoute()
      const router = useRouter()
      const id = route.query.id?route.query.id:0
      const state = reactive({
        btnSubmit:"Save",
        formData: {
          title: "",
          author: "",
          publication_year: 1999,
          isbn: "",
        },
        rules: {
          title: [{
            required: true,
            message: 'The title cannot be empty',
          }],
          publication_year: [{
            pattern: /^[-]?\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: ''
          }],
          isbn: [{
            required: true,
            message: 'The isbn is required',
          }],
        },
      })
      onMounted(() => {
        methods.loadBook()
      })
      const methods = {
        loadBook(){
          if (id == 0) return
          state.btnSubmit = "Confrim"
          getBook(id).then((res) => {
            let data = res.data
            delete data.create_time
            delete data.update_time
            state.formData = data
          });
        },
        modify(){
          if (id == 0) return
          updateBook( state.formData).then((res) => {
            if(res.code == 0)
              router.push({name:"Dashboard"})
          })
        },
        save(){
          if (id != 0) return
          saveBook( state.formData).then((res) => {
             if(res.code == 0)
               router.push({name:"Dashboard"})
          })
        }
      }
      const instance = getCurrentInstance()
      const submitForm = () => {
        instance.proxy.$refs['vForm'].validate(valid => {
          if (!valid) return
          methods.save() || methods.modify()
        })
      }
      const resetForm = () => {
        instance.proxy.$refs['vForm'].resetFields()
      }
      const goBackTo= () => {
         router.back()
      }
      return {
        ...toRefs(state),
        ...methods,
        submitForm,
        resetForm,
        goBackTo
      }
    }
  })
  
</script>

<style lang="scss">
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }
  
  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }
    
    .el-rate {
      margin-top: 8px;
    }
  }
  
  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }
    
    .el-rate {
      margin-top: 6px;
    }
  }
  
  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }
    
    .el-rate {
      margin-top: 4px;
    }
  }
  
  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }
  
  .clear-fix:after {
    clear: both;
  }
  
  .float-right {
    float: right;
  }
  
</style>

<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }
  
  div.tab-container {}
  
  .label-left-align :deep(.el-form-item__label) {
    text-align: left;
  }
  
  .label-center-align :deep(.el-form-item__label) {
    text-align: center;
  }
  
  .label-right-align :deep(.el-form-item__label) {
    text-align: right;
  }
  
  .custom-label {}
  
  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }
  


</style>